<template>
  <div class="p-4" style="height: 100%; overflow: auto;">
    <div class="ant-page-header" style="margin-bottom: 20px;" v-if="shownotice">
      <div class="lg:flex" style="display: flex;">
      <Avatar :src="userinfo.avatar || headerImg" :size="72" class="!mx-auto !block" />
      <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
        <h1 class="md:text-lg text-md">{{ t('routes.demo.inet.welcome_title1') }}</h1>
        <span class="text-secondary"> {{ t('routes.demo.inet.welcome_title2') }} </span>
      </div>
      <div class="flex flex-1 justify-end md:mt-0 mt-4">
        <!--<div class="flex flex-col justify-center text-right">
          <span class="text-secondary"> 待办任务 </span>
          <span class="text-2xl" style="color: #ff0000;">5</span>
        </div>
        -->
        <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
          <span class="text-secondary"> {{ t('routes.demo.inet.hard_disk_occupancy') }} </span>
          <span class="text-2xl">23.6/300G</span>
        </div>
        <div class="flex flex-col justify-center text-right md:mx-16 mx-12">
          <span class="text-secondary"> {{ t('routes.demo.inet.CPU_usage') }} </span>
          <span class="text-2xl">15%</span>
        </div>
        <div class="flex flex-col justify-center text-right md:mr-10 mr-4">
          <span class="text-secondary"> {{ t('routes.demo.inet.RAM_usage') }} </span>
          <span class="text-2xl">70%</span>
        </div>
      </div>
    </div>
  </div>
    <GrowCard :loading="loading" class="enter-y" />
    <!--<SiteAnalysis class="!my-4 enter-y" :loading="loading" />-->

  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import GrowCard from './components/GrowCard.vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/header.jpg';
  import { useI18n } from '/@/hooks/web/useI18n';
  const userStore = useUserStore();
  const userinfo = userStore.getUserInfo;
  const loading = ref(true);
  const shownotice=ref(true)
  setTimeout(() => {
    loading.value = false;
  }, 1500);
  const { t } = useI18n();
</script>
<style>

</style>
